<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 核心标签是最常用的JSTL标签 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %><!-- 包含一系列标准函数,大部分 是通用的字符串处理函数 -->
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><!-- 格式化并输出文本、日期、时间、数字 -->
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
<head>
	<title>捕鱼房间 -- </title>
	<base href="<%=basePath%>"/>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="icon" type="image/png" href="i/buyu.ico">
	<link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">
	<link rel="stylesheet" href="css/amazeui.min.css" />
	<link rel="stylesheet" href="css/app.css">
	<link rel="stylesheet" href="layui/css/layui.css" media="all"> <!-- 适应所有设备 -->
	<style type="text/css">
	.layui-form-label{
	  width:150px;
	  font-size:18px;
	  text-align:left;
	  padding-right:0px;
	  margin-right:0px;
	}
	.layui-input-block{
	  
	}
	.layui-nav{
	    width:40%;
	    padding : 0px;
	}
	.layui-nav .layui-nav-item{
	    width: 20%;
	}
</style>
</head>
<body>
    <c:if test="${not empty applicationScope.skin}">
      <jsp:include page="../top${applicationScope.skin}.jsp"></jsp:include>
    </c:if>
    <jsp:include page="../header.jsp">
      <jsp:param value="4" name="a"/>
      <jsp:param value="1" name="b"/>
    </jsp:include>
    
    <div class="tpl-page-container tpl-page-header-fixed">
      <div class="tpl-portlet-components tpl-portlet-components-percent am-center">
        <ul class="layui-nav layui-bg-blue"><!-- layui-nav是用于导航链接的部分 -->
            <li class="layui-nav-item layui-this"><a href="" target="_blank">海马迎新</a></li>
            <li class="layui-nav-item"><a href="" target="_self">海豚港湾</a></li>
            <li class="layui-nav-item"><a href="#" target="_blank">巨鲸领域</a></li>
            <li class="layui-nav-item"><a href="#" target="_blank">免费赛</a></li>
            <li class="layui-nav-item"><a href="#" target="_blank">大奖赛</a></li>
        </ul><br/>
        <form class="layui-form" action="" onsubmit="return false;">
        <div class="layui-form-item">
           <div class="layui-inline">
             <label class="layui-form-label">在线人数：</label>
             <span class="layui-btn" style="margin-left:-40px;">1234</span>
           </div>
           <div class="layui-inline">
             <label class="layui-form-label">抽税点万份比：</label>
             <span class="layui-btn">100[调整]</span>
           </div>
           <div class="layui-inline">
             <label class="layui-form-label">抽水值：</label>
             <span class="layui-btn">123456</span>
           </div>
           <div class="layui-inline">
             <label class="layui-form-label">房间服务器：</label>
             <div class="layui-input-inline">
             <select name="ServerId" id="ServerId" lay-filter="ServerId">
                <option value="0">所有服务器</option>
                <option value="1">服务器1</option>
                <option value="2">服务器2</option>
             </select>
             </div>
           </div>
           <div class="layui-inline">
             <div class="layui-input-inline">
               <button class="layui-btn layui-btn-normal" data-type="reload" lay-filter="findID" id="findID">立即提交</button>
               <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			 </div>
		   </div>
        </div>
        </form>
        <table class="layui-table" lay-data="{}" lay-filter="difficult" id="difficult">
	  </div>
    </div>
    
    <script src="js/jQuery-2.2.0.min.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/common/monitor_back.js"></script>
    <script type="text/javascript">
        layui.use(['layer','element','table','form'],function(){
        	var layer = layui.layer
        	    ,element = layui.element
        	    ,table = layui.table
        	    ,form = layui.form;
        	
        	layer.config({
				extend: 'MySkin/style.css'
			});
        table.render({
        	elem:'#difficult',
        	url:'room/fish/table',
        	method:'post',
        	totalRow:true,
        	cellMinWidth:80,
        	id:'Alltable',
        	where:{
        		ServerId:$('#ServerId option:selected').val(),
        		roomId:$('#').val()
        	},
        	cols: [[
        		{
        		field : 'PlatformId',
				width : 250,
				title : '台子ID',
				align : 'center'
			}, {
				field : 'WaterLine',
				width : 150,
				title : '水位',
				align : 'center'
			}, {
				field : 'DifficultLevel',
				width : 120,
				title : '当前难度',
				align : 'center'
			}, {
				field : 'DifficultAllLevel',
				width : 120,
				hide  : true,
				title : '难度级别',
				align : 'center'
			}, {
				title : '操作',
				fixed : 'right',
				width : 120,
				align : 'center',
				toolbar : '#tool'
			}
        	]],
        	response:{
        		statusCode : 200
        	},
        	parseData: function(res){
        		return{
        			"code":res.status,
        			"msg":res.message,
        			"count":res.count,
        			"data":res.data
        		};
        	}
        });
        
        //table的渲染 
        var active = {
            reload : function(){
            	table.reload('Alltable',{
            		page : {
            			cuur : 1
            		},
            		where:{
            			ServerId:$('#ServerId option:selected').val(),
                		roomId:$('#').val()
            		}
            	});
            	return false;
            }		
        };
        $("#findID").on('click',function(){
        	var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        
        table.on('tool(difficult)',function(obj){
            if (history.state == null){
                pushHistory();
            }
        	var data = obj.data;
        	if(obj.event == 'edit'){
        		var DifficultAllLevel = data.DifficultAllLevel;
        		layer.open({
                    title: '游戏台子难度选择'
                    ,skin: 'layer-ext-yourskin'
                    ,shade: 0.5
               		,area: ['400px', '200px']
                    , content: '<div class="layui-form-item">' +
                        '<label class="layui-form-label">难度选择</label>' +
                        '<div class="layui-input-block">' +
                        '<select name="select_difficult" id="select_difficult" lay-filter="select_difficult">' +
                        '</select>' +
                        '</div>' +
                        '</div>'
                        ,success: function () {
                        	for(var i = (((DifficultAllLevel - 1)/2) -(DifficultAllLevel - 1));i <= (DifficultAllLevel - 1)/2;i++){
            				    $("#select_difficult").append("<option value=" + i + ">" + Math.floor((i + DifficultAllLevel/2 + 1)) + "</option>");
            				}
                        	form.render('select');
                        	//layer.msg('修改成功', { time: 800, icon: 1 });

                        	 // layer.msg('网络连接失败', { time: 800, icon: 2 });
                        	 },
                        cancel:function () {
                            window.history.back();
                        }
                    });
                }
            return false;
        	});
        
        form.on('select(ServerId)',function(){
        	var serverId = $('#ServerId option:selected').val(); 
        	$.ajax({
        		type:"post",
        		url :"room/fish/table",
        		async:false,
        		data :  {ServerId : serverId},
        		success:function(data){
                  table.reload('Alltable',{
                    page : {
                      cuur : 1
                      },
                    where:{
                      ServerId:$('#ServerId option:selected').val(),
                      roomId:$('#').val()
                    }
                  });
                  return false;
        		},error:function(){
        			layer.msg("获取数据失败");
        		}
        	});
        });
        });
    </script>
    <script type="text/html" id="tool">
        <a class="layui-btn layui-btn-xs" lay-event="edit">难度修改</a>
    </script>
</body>
</html>